<template>
    <div class="goods-box5">
      <div class="goods" v-for="(item, index) in goods" :key="index" @click="DetailBtn(item)">
        <img class="imgs" :src="imgfun(item.bankId)" alt="" />
        {{item.icon}}
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { selectBank } from "../api/finance";
  import Pagination from "../components/Pagination.vue";
  import bank1001 from '../assets/img/bank1001.jpg';
  import bank1002 from '../assets/img/bank1002.jpg';
  import bank1003 from '../assets/img/bank1003.jpg';
  import bank1004 from '../assets/img/bank1004.jpg';
  import bank1005 from '../assets/img/bank1005.jpg';
  import bank1006 from '../assets/img/bank1006.jpg';
  import bank1007 from '../assets/img/bank1007.jpg';
  import bank1008 from '../assets/img/bank1008.jpg';
  import bank1009 from '../assets/img/bank1009.jpg';
  import bank1010 from '../assets/img/bank1010.jpg';
  import {useFinanceStore} from '../stores/finance'
  
  const router = useRouter();
  const imgfun=(bankId)=>{
    // console.log(bankId);
    
   return imgArray.find((item1) => item1.id==bankId).icon
 
 
  }
  const imgArray = [
    { id: '1001', icon: bank1001 },
    { id: '1002', icon: bank1002 },
    { id: '1003', icon: bank1003 },
    { id: '1004', icon: bank1004 },
    { id: '1005', icon: bank1005 },
    { id: '1006', icon: bank1006 },
    { id: '1007', icon: bank1007 },
    { id: '1008', icon: bank1008 },
    { id: '1009', icon: bank1009 },
    { id: '1010', icon: bank1010 },
  ];
  
  const goods = ref([]);
  const total = ref(0);
  const pageSize = ref(30);
  const url = ref("/order/goods/");
  const goodsCount = ref(sessionStorage.getItem("/order/goods/pageCode") || 1);
  
  onMounted(() => {
    selectBank({}).then((res) => {
        // console.log(res);
        
      if (res.message === 
      "操作成功") {
        let tmp = res.data;
        if (tmp && tmp.length > 0) {
          tmp.forEach((item2) => {
            const matchingItem = imgArray.find((item1) => item2.bankId === item1.id);
            if (matchingItem) {
              Object.assign(item2, matchingItem);
            }
          });
          goods.value = tmp;
          // console.log(goods.value);
          
        }
      } else {
        goods.value = [];
        alert('您未登录，请先登录');
      }
    });
  });
  
  const pageClick = (item) => {
    goods.value = item;
  };
  

  const financeStore=useFinanceStore()

  const DetailBtn = (item) => {
    // console.log(item);
    financeStore.setFinance(item)
    router.push({ name: 'financingDetails', query: { bankId: item.bankId } }).catch((err) => err);
 
  };
  </script>
  
  <style lang="less" scoped>

  .goods-box5 {
    background-color: #f9f9f9;
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
  
    .goods {
      width: 200px;
      height: 180px;
      background-color: white;
      border-radius: 6px;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
      margin-right: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  
      .imgs {
        width: 150px;
        height: 140px;
        margin-right: 10px;
        border-radius: 6px;
      }
    }
  }
  </style>